<template>
	<section>
		<h4>菜单编辑</h4>
		<el-col :span="24">
			<el-form label-width="80px">
				<el-form-item label="菜单名称">
					<el-input v-model="button.name"></el-input>
				</el-form-item>
				<el-form-item label="根菜单">
					<el-checkbox v-model="rootMenu"></el-checkbox>
				</el-form-item>
				<section v-if="!rootMenu">
					<el-form-item label="类型">
						<el-select placeholder="选择子菜单类型" v-model="button.type">
							<el-option v-for="item in types" :key="item.name" :label="item.name" :value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item v-if="button.type==='media_id' || button.type==='view_limited'" label="MEDIA_ID">
						<el-input type="text" v-model="button.mediaId"></el-input>
					</el-form-item>
					<el-form-item v-if="button.type==='view'" label="URL">
						<el-input type="text" v-model="button.url"></el-input>
					</el-form-item>
					<el-form-item v-if="button.type==='location_select'||button.type==='click'||button.type==='pic_sysphoto'||button.type==='pic_photo_or_album'||button.type==='pic_weixin'||button.type==='scancode_waitmsg'||button.type==='scancode_push'" label="KEY">
						<el-input type="text" v-model="button.key"></el-input>
					</el-form-item>
				</section>
			</el-form>
		</el-col>


		<el-col :span="24" v-if="rootMenu" style="margin-bottom: 15px;">
			<SubButtonEdit :button="button"></SubButtonEdit>
		</el-col>

		<el-col align="right">
			<el-button @click.native="cancel">取消</el-button>
			<el-button type="primary" @click.native="submit">保存</el-button>
		</el-col>

	</section>
</template>

<script>
	import SubButtonEdit from './SubButtonEdit.vue';
	export default {
		name:'button-edit',
		props:['sourceBtn'],
		components:{SubButtonEdit},
		data(){
			return {
				button:{},
				rootMenu:false,
				types:[
					{name:'显示',value:'view'},
					{name:'点击',value:'click'},
					{name:'扫码带提示',value:'scancode_waitmsg'},
					{name:'扫码推事件',value:'scancode_push'},
					{name:'系统拍照发图',value:'pic_sysphoto'},
					{name:'拍照或者相册发图',value:'pic_photo_or_album'},
					{name:'微信相册发图',value:'pic_weixin'},
					{name:'发送位置',value:'location_select'},
					{name:'图片',value:'media_id'},
					{name:'图文消息',value:'view_limited'},
				],
			}
		},
		mounted(){
			this.button = JSON.parse(JSON.stringify(this.sourceBtn));
			if(!this.button.type) this.rootMenu = true;
		},
		methods:{
			submit(){
				if(this.verify()){
					if(this.rootMenu){
						delete this.button.type;
						if(this.button.subButtons.length===0) this.button.subButtons.push({type:'view',name: '搜索',url: 'http://www.soso.com/'})
					}
					else this.button.subButtons = [];
					console.log(this.button);
					this.$emit('submit',this.button);
				}
			},
			verify(){
				if(!this.rootMenu && !this.button.type){
					this.$message({type:'error',message:'必须选择类型'});
					return false;
				}
				return true;
			},
			cancel(){
				this.$emit('cancel');
			},
		}
	}
</script>

<style lang="scss"></style>
